<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
    <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta name="renderer" content="webkit" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="initial-scale=1,minimum-scale=1" />
        <title>活动管理-融媒服务</title>
        <c:import url="/public/head-tag.jsp" />
        <style>
            .label {
                padding: 2px 3px;
                color: #FFF;
                border-radius: 2px;
                margin: 0 2px;
                border: 1px solid #E0E0E0;
                font-weight: 400;
            }
            
            .label.label-red {
                color: #DC4D4D;
                border-color: #DC4D4D;
            }
            
            .label.label-blue {
                color: #5050DC;
                border-color: #5050DC;
            }
            .table td{position:relative;}
.actions {
    position: absolute;
}
.actions-top {
    top: 5px;
    right: 5px;
}
.actions-bottom {
    bottom: 5px;
    right: 5px;
    display:none;
}
.action-remove{color:gray;}
.action-remove:hover{color:red;text-decoration: none;}
            .table td{
                vertical-align: top;
            }
            .title a{
                font-size:14px;
            }
            .actions .action-link {
                font-size: 14px;
            }
        </style>
    </head>

    <body>
        <c:import url="/public/header.jsp" />
        <section class="container">
            <%--<c:set var="sidebar" scope="request" value="content" />--%>
            <%--<c:set var="navbar" scope="request" value="activity" />--%>
            <%--<c:import url="/public/sidebar.jsp" />--%>
            <div class="content">
                <div class="content-top">
                    <h3 class="content-title">活动管理</h3>
                    <p class="content-note">融媒服务</p>
                    <div class="content-action">
                        <a href="/demo/web/action/guide" class="action-item icon-add" title="发布活动">发布活动</a>
                    </div>
                </div>
                <div class="content-main">
                    <section class="content-item" data-template="template/list" id="box">
                        <div class="content-item-top">
                            <form action="/demo/web/action/listSearch" method="get">
                                <input type="hidden" name="page" value="1" />
                                <div class="filter-item">
                                    <label for="">时间</label> <input type="text" class="text text-100" placeholder="开始时间" name="sdate" date-range /> <span>至</span> <input type="text" class="text text-100" placeholder="结束时间" name="edate" date-range />
                                </div>
                                <div class="filter-item">
                                    <label for="">筛选</label>
	                                    <div class="filter-item-content">
		                                        <select name="status" class="select">
													<option value="">所有状态</option>
													<option value="1">已上线</option>
													<option value="0">待上线</option>									
													<option value="-1">已下线</option>	
													<option value="-2">已删除</option>	
												</select>
		                                        <select name="actionType" class="select">
													<option value="">所有活动</option>
													<option v-for="item in pluginTypes" value="{{item.value}}">{{item.name}}</option>
												</select>
	                                        <input type="checkbox" value="1" name="loopStatus" id="category_2" />
	                                        <label for="category_2">轮播</label>
	                                </div>
	                             </div>
                                <div class="filter-item">
                                    <label for="">搜索</label> <input type="search" class="text text-150" name="title" placeholder="输入关键字" id="search-input" /> <input type="submit" class="btn btn-search" value="搜索" id="search-button" />
                                </div>
                            </form>
                        </div>
                        <div class="content-item-block">

                            <table class="table">
                                <thead>
                                    <tr>
                                        <th style="width: 5%"></th>
                                        <th style="width: 15%">发布时间</th>
                                        <th style="width: 40%">活动</th>
                                        <th style="width: 40%"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="align-center" colspan="4">加载中...</td>
                                    </tr>
                                </tbody>
                            </table>

                        </div>
                    </section>
                </div>
            </div>
        </section>

        <script id="template/list" type="text/template">
            {{if !code }}
            <tr>
                <td colspan="4" class="color-red">查询错误！</td>
            </tr>
            {{else if code!=200}}
            <tr>
                <td colspan="4" class="color-red">{{msg || '查询错误！'}}</td>
            </tr>
            {{else if !data.list || data.list.length==0}}
            <tr>
                <td colspan="4">没有记录！</td>
            </tr>
            {{else}} 
            {{each data.list as item}}
            <tr>
                <td>
                    <p>{{$index+1+(data.paging.currentPage-1)*data.paging.pageSize}}</p>
                </td>
                <td>
                    <p>{{ item.cdateL | dateFormat:'yyyy-MM-dd' }}</p>
                    <p class="value-note">{{ item.cdateL | dateFormat:'HH:mm' }}</p>
                </td>
                
                <td>
                    <p class="title">
                        <a> {{ item | getTitle }}</a>
                         {{ if item.loopStatus==1 }}<span class="label label-red">轮播</span> {{/if}}
                    </p>
                    <p class="value-note">类别：{{ item.actionType | getPluginName }}</p>
                    <p class="value-note">权重：{{item.sort}}</p>
                    <p class="value-note">时段：{{ item.sdateL | dateFormat:'yyyy-MM-dd HH:mm' }} ~ {{ item.edateL | dateFormat:'yyyy-MM-dd HH:mm' }}</p>
                    <p class="value-note">发布人：{{ item.createUser }}</p>
                    <p class="value-note">状态：{{ if item.status==-2}}
                    <span class="state color-gray">已删除</span> {{/if}} {{ if item.status==-1}}
                    <span class="state">已下线</span> {{/if}} {{ if item.status==0}}
                    <span class="state color-blue">待上线</span> {{/if}} {{if item.status>=1}}
                    <span class="state color-green">已上线</span> {{/if}}
                    </p>
                </td>

                <td>
                    {{if item.status!=-2}}
                    <div class="actions actions-top">
                        <a href="{{item | getPreviewURL}}" data-action="item.preview" target="_blank" class="action-link">预览</a>
                        <a href="javascript:;" data-action="item.changeState" data-params="{{item | pick:'actionId:id,status' | toJSON}}" class="action-link">
                        {{if item.status>0}}下线  {{ else}}上线{{/if}}
                        </a>
                        <span class="global-spliter">|</span>
                        <a href="/demo/web/action/data?type={{item.actionType | getPluginAliases}}&id={{item.actionId}}" class="action-link">查看数据</a>
                        <a href="/demo/web/action/updatePage?type={{item.actionType | getPluginAliases}}&id={{item.actionId}}" class="action-link">编辑</a>
                        <div class="action-menu-box" data-menu="container">
                            <p class="action-menu-title" data-menu="title"><a href="javascript:;" class="action-link">更多...</a></p>
                            <div class="action-menu-content">
                                <a href="javascript:;" data-action="item.edit" data-params="{{item | pick:'actionId:id,title,sort,loopStatus,actionType,status' | toJSON}}" class="action-link">轮播设置</a>
                                <a href="javascript:;" data-action="item.edit" data-params="{{item | pick:'actionId:id,title,sort,loopStatus,actionType,status' | toJSON}}" class="action-link">权重调整</a>
                                <a href="javascript:;" data-action="item.remove" title="删除" data-params="{{item | pick:'actionId:id' | toJSON}}" class="action-link color-red">删除活动</a>
                            </div>
                        </div>
                    </div>
                    <div class="actions actions-bottom">
                    </div>
					{{/if}}


                </td>
            </tr>
            {{/each}}
            {{/if}}

        </script>
        <script type="text/template" id="item/edit" title="活动设置">
            <form action="/demo/web/action/updateShow" method="post">
                {{if title}}
                <div class="form-row">
                    <span class="row-label">活动：</span>
                    <div class="row-content">
                        <p class="row-value">{{title}}</p>
                    </div>
                </div>
                {{/if}}
                <div class="form-row">
                    <span class="row-label">轮播：</span>
                    <div class="row-content">
                        <p class="row-value">
                            <input type="checkbox" id="isTop" name="isloop" value="1" {{if loopStatus!==0}}checked="checked" {{/if}}/>
                            <label for="isTop">轮播</label>
                        </p>
                    </div>
                </div>
                <div class="form-row">
                    <span class="row-label">权重：</span>
                    <div class="row-content">
                        <input type="text" class="text" name="order" value="{{sort||0}}" iname="顺序" ipattern="^\d+(\.\d+)?$" />
                        <p class="value-note">数值越大，该项目越靠前</p>
                    </div>
                </div>
                {{ if actionType == 4}}
                <div class="form-row">
                    <span class="row-label">投票状态：</span>
                    <div class="row-content">
                        <select name="status" class="select">
					{{if status == -1}}<option value="-1">已下线</option>{{/if}}
					{{if status ==  0}}"> <option value="0">已下线</option> {{/if}}
					{{if status ==  1}}"> <option value="1">既可报名又可投票</option> {{/if}}
					{{if status ==  2}}"> <option value="2">投票结束</option> {{/if}}
					{{if status ==  3}}"> <option value="3">只可报名不可投票</option>{{/if}}
					{{if status ==  4}}"> <option value="4">不可报名可投票</option> {{/if}}
					<option value="1">既可报名又可投票</option>
					<option value="2">投票结束</option>
					<option value="3">只可报名不可投票</option>
					<option value="4">不可报名可投票</option>
				  </select>
                    </div>
                </div>
                {{/if}} {{if id}}
                <input type="hidden" name="id" value="{{id}}" /> {{/if}}
            </form>
        </script>
        
   <script src="/pages/assets/js/require.all.js"></script>
   <script>
        requirejs([
            'vue',
            'artTemplate', 
            'artDialog',  
            
            'utils.action',  
            'vender.modal',  
            'vender.types',  
            
            'jquery.daterangepicker', 
            'jquery.formcheck', 
            'jquery.ajaxsubmit', 
            'jquery.common',
            'jquery.pager'
        ], 
        
        function(Vue, template, dialog,  ActionModel, Modal,  Field){
            
                template.helper('getPluginAliases', function(t) {
                    var plugin = Field.Plugins.get(t);
                    if (!plugin) return '';
                    return plugin.aliases;
                })
            
                template.helper('getPluginName', function(t) {
                    var plugin = Field.Plugins.get(t);
                    if (!plugin) return '未知类别';
                    return plugin.name;
                })
            
                template.helper('getTitle', function(item) {
                	var title = item.title;
                	if(item.status>1){
                		if(item.status==2) title += '(投票结束)'
                		if(item.status==3) title += '(仅投票)'
                		if(item.status==4) title += '(仅报名)'
                	}
                    return title
                })
            
                template.helper('getPreviewURL', function(item) {
                	/*if(item.actionType==Field.Plugins.SIGNUP
                			|| item.actionType==Field.Plugins.VOTE 
                			|| item.actionType==Field.Plugins.LOTTERY_9GRID
                			|| item.actionType==Field.Plugins.LOTTERY_WHEEL){
	                	return '/demo/web/apply/createPage?id=' + item.actionId;
                	}*/
                	return item.url;
                })
                
                var Action = new ActionModel({
                    maps:{
                        'item.remove':'/demo/web/action/deleteSave',
                        'item.update':'/demo/web/action/updateStatus',
                    }
                })
                
                var App = {
                    
                    alert: function() {
                        return Modal.alert.apply(this, arguments)
                    },
                    
                    confirm: function() {
                        return Modal.confirm.apply(this, arguments)
                    },
                
                    initDatePicker: function() {
                        var $dates = $("[date-range]").dateRangePicker({
                            separator: '至',
                            getValue: function() {
                                return '';
                            },
                            setValue: function(s, s1, s2) {
                                return false;
                            }
                        }).on("datepicker-apply",
                        function(e, date) {
                            $dates.eq(0).val(date.date1.format('yyyy-MM-dd'));
                            $dates.eq(1).val(date.date2.format('yyyy-MM-dd'));
                            $(this).parents("form:first").submit()
                        })
                    },
                    
                    reloadItems: function() {
                        $("#box").reload();
                    },
                    
                    operate:function(url, data){
                        
                        var dtd = $.Deferred();
                        
                        $.post(url, data, function(res){
                            var result = Action.transformResponse(res);
                            var code = result.code;
                            if(code==200){
                                dtd.resolve(result.data)
                            }else{
                                var msg = result.msg || '数据获取失败！';
                                dtd.reject(msg)
                            }
                        })
                        .fail(function(e, type, msg){
                            dtd.reject(type + msg)
                        })
                        
                        return dtd;
                    },
                    
                    editItem: function(data) {
                        var id = "item/edit";
                        var title = document.getElementById(id).title;
                        var content = template(id, data);
                        var idialog = dialog({
                            id: id,
                            zIndex: 5,
                            width: 420,
                            padding: "0 20px",
                            onshow: function() {
                
                                //解决当表单中只有一个input:text时按回车自动提交form的问题
                                this.getContent().find("form").on("submit",
                                function(e) {
                                    e.preventDefault();
                                    return false;
                                });
                            },
                            button: [{
                                id: "cancel",
                                value: "取消"
                            },
                            {
                                id: "ok",
                                value: "确定",
                                autofocus: true,
                                callback: function() {
                                    var $form = this.getContent().find("form");
                                    $form.ajaxSubmit({
                                        onSuccess: function(result) {
                                            var code = result.code;
                                            if (code == 200) {
                                                idialog.remove();
                                                App.reloadItems();
                                            } else {
                                                var msg = result.msg || "提交失败！";
                                                App.alert(msg);
                                            }
                                        }
                                    }) ;
                                    return false;
                                }
                            }]
                        }) ;
                        idialog.title(title).content(content).showModal();
                    },
                    
                    removeItem: function(data) {
                        var app = this;
                        app.confirm('确定要删除吗？')
                        .then(function(){
                            var api = Action.get('item.remove', data);
                            app.operate(api, data)
                            .then(function(data){
                                app.reloadItems();
                            })
                            .fail(function(msg){
                                app.alert(msg);
                            })
                        })
                    },
                    
                    changeItemState: function(data) {
                        var app = this;
                        
                        var title = '确定要<b class="state-red">上线</b>吗？';
                        if(data.status > 0) title = '确定要<b class="state-red">下线</b>吗？';
                        
                        app.confirm(title)
                        .then(function(){
                            var api = Action.get('item.update', data);
                            app.operate(api, data)
                            .then(function(data){
                                app.reloadItems();
                            })
                            .fail(function(msg){
                                app.alert(msg);
                            })
                        })
                    },
                    
                    changeItemState2: function(data) {
                        var id = "item/changeItemState";
                        var title = "警告";
                        var content = template(id, data);
                        var idialog = dialog({
                            id: id,
                            zIndex: 5,
                            width: 300,
                            padding: "40px 20px",
                            title: title,
                            content: content,
                            button: [{
                                id: "cancel",
                                value: "取消"
                            },
                            {
                                id: "ok",
                                value: "提交修改",
                                autofocus: true,
                                callback: function() {
                                    var $form = this.getContent().find("form");
                                    $form.ajaxSubmit({
                                        onSuccess: function(result) {
                                            var code = result.code;
                                            if (code == 200) {
                                                idialog.remove();
                                                App.reloadItems();
                                            } else {
                                                var msg = result.msg || "提交失败！";
                                                App.alert(msg);
                                            }
                                        }
                                    }) ;
                                    return false;
                                }
                            }]
                        });
                        idialog.showModal();
                    },
                    
                    previewPage: function(url) {
                        var settings = 'toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=320, height=500'
                        var windowWidth = $(window).width();
                        var left = windowWidth / 2 - 160;
                        settings += ',top=100,left=' + left;
                        var opener = window.open(url, "_blank", settings)
                    },
                    
                    initApp:function(){
        				new Vue({
        					el:'body',
        					computed:{
        						'pluginTypes':function(){
        							return Field.Plugins.list().filter(function(item){
        								return item.type == Field.PluginType.TEMPLATE
        							})
        						}
        					},
        					methods:{
        						
        						getInitData :function(){
        							return {
        								store:{}
        							}
        						},
        						
        						getStore :function(){
        							return this.store;
        						}
        					},
        					data:function(){
        						return this.getInitData()
        					}
        				})
                    },

                    initMenu:function(){

                        $('body').on('click', '[data-menu="container"]', function(e){
                            var $target = $(e.target);
                            var $menu = $(this);

                            var titlePattern = '[data-menu="title"]';
                            if($target.is(titlePattern) || $target.parent().is(titlePattern)) $menu.addClass('active');
                            else $menu.removeClass('active');
                        })

                        $(document).on('click', function(e){
                            var $target = $(e.target);
                            if($target.parents('[data-menu="container"]:first').length==0){
                                $('[data-menu="container"]').removeClass('active')
                            }
                        })
                    },

                    init: function() {
                    	
                        var app = this;
                       
                        app.initApp();
                        this.initDatePicker();
                        this.initMenu();
                        $("[data-template]").ajaxLoad({
                            dataFilter: function(r) {
                                return r
                            }
                        });


                        $("body").on("click", "[data-action]", function() {
                            var $this = $(this);
                            var action = $this.data("action");
                            var data = $this.data("params");
                            
                            if (action == "item.remove") {
                                App.removeItem(data);
                            }
                            
                            if (action == "item.edit") {
                                App.editItem(data);
                            }
                            
                            if (action == "item.preview") {
                                App.previewPage($this.attr('href'));
                                return false;
                            }

                            if (action == "item.changeState") {
                                App.changeItemState(data);
                            }

                            //return false;
                        })

                    }
                }
                App.init();
        })
   </script>
    </body>
</html>